<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Class与Style绑定</title>
    <style>
        .active{
          background-color: aqua;  
        }
        .noActive{
            background-color: blue;  
        }
        .moreBig{
            font-size: 500px;
        }
        .sty1{
           background-color:red  
        }
        .sty2{
           background-color:yellow 
        }
        .sty3{
           background-color:green  
        }
        .sty4{
           background-color:pink  
        }
        .highlight{
          font-weight: bolder;
        }
        .colorful{
          color: yellow;
        }
        .shadow{
          text-shadow: 5em;
        }
         
        
    </style>
</head>
<body>
   <div id="root">
    <!-- 字符串变量写法 -->
    <div :class="abc">
      你好<button @click="abc='noActive'">点我</button>
    </div>
    <!-- 对象写法 -->
    <div :class="{active:isActive,noActive:!isActive}">
      你好<button @click="isActive=!isActive">点我</button>
    </div>
   <!-- 字符串变量写法 -->
    <div :class="randomStyle">
      你好,试试F5刷新哦
    </div>
  <!-- 对象写法 -->
    <div :class="txtStyle" class="sty4">
      多彩缤纷的文字<br/>
      <button @click="txtStyle.highlight=!txtStyle.highlight">加粗</button>
      <button @click="txtStyle.colorful=!txtStyle.colorful">加颜色</button>
      <button @click="txtStyle.shadow=!txtStyle.shadow">加阴影</button>
      <button @click="txtStyle.moreBig=true">变大</button>
    </div>
    <!-- 数组写法 -->
    <div :class="arr">
      数组也可以绑定class
    </div>
    <!-- 内联样式绑定 -->
    <div :style="styleObj">
      绑定内联样式
    </div>
   </div> 
    
    
  <script>
  let app =   new Vue({
       el:'#root',
       data: {
         abc: 'active',
         isActive: true,
         moreBig: false,
         txtStyle:{highlight:false,colorful:false,shadow:false},
         arr : ['sty1','sty2','sty3','sty4'],
         styleObj: {
           fontSize: '40px',
           color: 'red',
           fontWeight: 'bolder'
         }
       },
       computed:{
        randomStyle:function(){
          let arr = ['sty1','sty2','sty3','sty4']
           let pickId = Math.floor(Math.random()* arr.length)
           return arr[pickId]   
        }
       } 
    })
  </script>  
</body>
</html>